<!-- 数字样机拖拉拽页面 -->
<template>
    <div class="paper">
        <div class="graph-operate">
            <el-button class="jtyj-btn-primary" size="mini" @click="addNode">新增节点</el-button>
            <el-button :disabled="!curSelectNodeId" class="jtyj-btn-cancel" size="mini"
                @click="removeNode">删除节点</el-button>
        </div>
        <div class="container" id="container"></div>
    </div>
</template>

<script>

var graph = null
export default {
    name: 'G6Graph',
    data() {
        return {
            curSelectNodeId: null
        };
    },
    mounted() {
        this.initGraph();
    },
    methods: {
        initGraph() {
            const { Graph, NodeEvent } = G6;
            graph = new Graph({
                autoFit: 'view',
                container: 'container',
                data: {
                    nodes: [
                        { id: 'node-1', data: { category: '主节点', name: '俺的森空军基地', status: '开发中', active: false } },
                        { id: 'node-2', data: { category: '从节点', name: '灰机', status: '开发中', active: false } },
                        { id: 'node-3', data: { category: '从节点', name: '跑道', status: '开发中', active: false } },
                    ],
                    edges: [
                        { source: 'node-1', target: 'node-2' },
                        { source: 'node-1', target: 'node-3' },
                        { source: 'node-2', target: 'node-3' },
                        { source: 'node-3', target: 'node-2' },
                    ],
                },

                node: {
                    type: 'html',
                    style: {
                        size: [240, 80],
                        dx: 0,
                        dy: 0,
                        innerHTML: (d) => {
                            const {
                                data: { category, name, status, active },
                            } = d;

                            return `
                                <div 
                                style="
                                    width:100%; 
                                    height: 100%; 
                                    background: var(--ui-component-background-alt); 
                                    border: ${active ? '2px solid var(--app-primary-base)' : '1px solid var(--ui-border-color-base)'};
                                    color: var(--app-primary-base);
                                    user-select: none;
                                    display: flex; 
                                    padding: 10px;
                                    border-radius: 8px;
                                    "
                                >
                                <div style="display: flex;flex-direction: column;flex: 1;">
                                    <div style="font-weight: bold; font-size: 14px;">
                                    ${category}
                                    </div>
                                    <div style="font-size: 12px; margin-top: 4px;">
                                    名称: ${name}
                                    </div>
                                </div>
                                <div>
                                    <span style="border: 1px solid var(--app-primary-base); padding: 2px 6px; border-radius: 4px; font-size: 12px; color: var(--app-primary-base);">
                                    ${status}
                                    </span>
                                </div>
                                </div>`;
                        },
                    },
                },
                edge: {
                    type: 'quadratic',
                    style: {
                        endArrow: true,
                    },
                },
                layout: {
                    type: 'circular',
                },
                behaviors: [
                    'drag-element',
                    'zoom-canvas',
                    'drag-canvas'
                ],

            });
            graph.on(NodeEvent.CLICK, this.handleNodeClick);
            graph.render();
        },
        handleNodeClick(event) {
            const { target } = event;
            const nodes = graph.getNodeData();

            // 遍历并更新每个节点的数据
            nodes.forEach(node => {
                const active = node.id == target.id;
                graph.updateNodeData([{ id: node.id, data: { active } }]);
            });
            let curSelectNode = graph.getNodeData(target.id);
            if (curSelectNode.data.category != "主节点") {
                this.curSelectNodeId = target.id;
            } else {
                this.curSelectNodeId = null;
            }
            this.$emit('nodeClick', curSelectNode);
            graph.render();

        },
        async addNode() {
            graph.addNodeData([{ id: 'node' + Math.floor(Math.random() * 9999) + 1, data: { category: '从节点', name: '', status: '开发中', active: false } }]);
            await graph.render();

        },
        removeNode() {
            graph.removeNodeData([this.curSelectNodeId]);
            this.curSelectNodeId = null;
            this.$emit('nodeRemove');
            graph.render();


        },
    },

    beforeDestroy() {
        // 销毁实例
        if (graph) {
            graph.destroy();
        }
    }
};
</script>
<style lang="scss" scoped>
.paper {
    .graph-operate {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-right: 10px;
        border-bottom: 1px solid var(--ui-border-color-base);
    }

    .container {
        width: 100%;
        height: calc(100% - 50px);
        overflow: auto;

    }
}
</style>